import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'


export default class App extends Component {
  // 状态在哪里，操作状态的方法就在哪里！！！

  // 初始化状态
  state = {
    todos:[{id: '001', name: '吃饭', done: true},
           {id: '002', name: '睡觉', done: true},
           {id: '003', name: '打代码', done: false},
           {id: '004', name: '逛街', done: true},]
  }

  // addTodo用于添加一个todo, 接收的参数是todo对象
  addTodo = (todoObj)=> {
    // 获取原todos
    const {todos} = this.state
    // 追加一个todo
    const newTodos = [todoObj, ...todos]
    // 更新状态
    this.setState({todos: newTodos})
  }

  // 用于更新一个todo对象
  updateTodo=(id, done)=>{
    // 获取状态中的todos
    const {todos} = this.state
    // 匹配处理数据
    const newTods = todos.map((todoObj)=> {
      if(todoObj.id === id){
        return {...todoObj, done: done}
      }else return todoObj
    })
    this.setState({todos: newTods})
  }

  // 用于删除一个todo
  deleteTodo=(id)=>{
    const newTodos = this.state.todos.filter((todoObj)=>{
      return todoObj.id !== id
    })

    // 更新状态
    this.setState({todos: newTodos})
  }

  // 用于全选
  checkAllTodo = (done)=>{
    // 获取原来的todos
    const {todos} = this.state
    // 加工数据
    const newTodos = todos.map((todoObj)=>{
      return {...todoObj, done: done}
    })
    // 更新状态
    this.setState({todos: newTodos})
  }

  // 用于清除所有已完成的
  clearAllDone = ()=>{
    // 获取原来的todos
    const {todos} =this.state
    // 过滤数据
    const newTodos = todos.filter((todoObj)=>{
      return !todoObj.done
    })
    // 更新状态
    this.setState({todos: newTodos})
  }

  render() {
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}/>
          <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={this.state.todos} checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
        </div>
      </div>
    )
  }
}
